<template>
  <view class="top-actions">
    <button
      v-for="(item, index) in items"
      :key="index"
      class="action-card"
      :open-type = "item.openType"
      :class="{ 
        primary: !!item.primary,
        disabled: !!item.disabled 
      }"
      @click="onTap(item, index)"
    >
      <view class="action-icon-bg">
        <image class="action-icon" style="width: 30rpx; height: 30rpx;" :src="item.icon" mode="aspectFit" />
      </view>
      <view class="action-text">
        <text class="action-title">{{ item.title }}</text>
        <text class="action-sub">{{ item.sub }}</text>
      </view>
    </button>
  </view>
</template>

<script>
export default {
  name: 'TopActionButtons',
  props: {
    items: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    onTap(item, index) {
      // 如果按钮被禁用，不执行任何操作
      if (item && item.disabled) {
        return;
      }
      
      this.$emit('action', { item, index });
      if (item && item.event) {
        this.$emit(item.event, { item, index });
      }
    }
  }
}
</script>

<style scoped>
.top-actions {
  margin: 16rpx 20rpx 0 20rpx;
  display: flex;
  gap: 20rpx;
}
.action-card {
  flex: 1;
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 210rpx;
  width: 220rpx;
  box-shadow: 0 4rpx 12rpx #3F3F3F1A;
}
.action-card.primary {
  background: #C02C38;
  color: #fff;
}
.action-icon-bg {
  width: 62rpx !important;
  height: 62rpx !important;
  min-width: 62rpx;
  min-height: 62rpx;
  flex-shrink: 0;
  /* border-radius: 50%; */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12rpx;
  background-image: url('/static/assets/sourceInfo/source-action-bg.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
}
.action-card.primary .action-icon-bg {
  background-image: url('/static/assets/sourceInfo/source-action-bg.png');
  background-color: transparent;
  /* background: rgba(255,255,255,0.15); */
}
.action-card.primary .action-text .action-title {
  color: #fff;
}
.action-card.primary .action-text .action-sub {
  color: #fff;
}

.action-card.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.action-card.disabled .action-text .action-title,
.action-card.disabled .action-text .action-sub {
  color: #999;
}

/* .action-icon {
  width: 56rpx;
  height: 56rpx;
} */
.action-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.action-title { font-size: 25rpx; font-weight: regular; color: #535353FF;}
.action-sub { font-size: 22rpx; margin-top: 4rpx; color: #535353FF; }
</style> 